関連
キャンベル(グッドハート)の法則
関連
キャンベル(グッドハート)の法則
「適切な計測」は「適切な推測」なしに成り立たせるのが難しい
CSSパフォーマンスに関する計測結果
#フルスタック(言語統一開発)
[基本的に多くのフロントエンドエンジニアにとってそれなりのコストを払ってようやく成すことができる最適化が事前に施されている https://d.potato4d.me/entry/20201129-frontend-2020/#:~:text=%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AB%E5%A4%9A%E3%81%8F%E3%81%AE%E3%83%95%E3%83
#フロントエンド
#メンタルモデル
推測するな計測せよ
Do it once. Do it right. And, you'll never have to do it again.(一度だけやれ。正しくやれ。そうすれば二度とやらずに済む。)
性能に関する考え方
#React_Server_Components #Selective_Hydration
@takepepe: App Router や Server Components が非機能要件に効くことをステークホルダーに説明できないと「採算あわないから今は pages で」にいつまでも停滞するので、そこの解像度をあげるのが急ぎという話。
#Vite
https://vite-plugin-ssr.com/
Like Next.js/Nuxt but as do one thing, do it well(一つのことをうまくやる) Vite plugin.
#Vite #Turbopack #Webpack
次世代バンドルツールの競争の今 Turbopack vs Vite
結論ファースト
次世代のwebpackとも言える新しいバンドルツールの中で特に注目を浴びているのがViteとTurbopackである。
現実的に開発されているアプリケーションのモジュール数を考えた場合、両者の性能を比較してTurbopackがViteよりも非常に優れている、と結論づける根拠がない。
@sumiren_t: Q: Viteで書かれた isMacOs = navigator.userAgent…による出し分けがNext.jsでは落ちる。どう実装したらいいか答えよ。
A: SSRするのは無駄なのでSG。ランタイムを判定してサーバーで実行されているときは適当な値を返しておくか、isMacOsを必要とするコンポーネントをdynamic import(ssrなし)する。
#React #Next.js #技術の審美眼
from
なぜReactを使用するのか
なぜNext.jsを使用するのか
@dll7: Next.jsは現代の歩く技術的負債になりかねないと思うんだけど、SSRとか要らないならVite+ReactでバックエンドはNest.jsあたりに寄せてしまったほうがマシじゃない?
#Next.js #App_Router #React_Server_Components
@SoraKumo001: Next.jsでApp Routerが難しいと戦々恐々としている人が結構います。
Server Componentsがデフォルトになっている限り、App Routerが天下を取る可能性は限りなく低いと考えます。
#Next.js #パフォーマンス
Next.js 13.5 | Next.js
We've made an exciting breakthrough to optimize package imports, improving both local dev performance and production cold starts, when using large icon or component libraries or other dependencies th
#技術の審美眼
#opinionated
←なぜReactを使用するのか
---
#Lee_Robinson
#技術の審美眼
定期的に更新する
from
Next.jsがReactの上に敷いてくれているレールを深掘る
Rich Harris on frameworks, the web, and the edge
#設計 #宣言的UIの設計レシピ #アーキテクチャ
モジュラフロントエンドのメモ を読んだの感想と、フロントエンドのレイヤードアーキテクチャについての紐解き
ここでのレイヤードアーキテクチャとは、Repositoryとかサービス(Service)みたいなDDDの戦術由来の概念のこと
結論
Render As You Fetchパターンがインフラストラクチャレイヤを置き換える
#設計 #宣言的UIの設計レシピ #アーキテクチャ
の視点でReact Server Components(RSC)の将来性を考える
まともな運用を考えるとフレームワーク利用が必須なのでApp Routerを利用する想定で書いてる
8割ぐらいドリームとポエム
関連
#Next.js
from フレームワーク乗り換える必要なし系の意見がもう少し欲しい
なぜNext.jsをやめたのか? - Hello Tech
フロントエンドの新規開発でNext.jsの採用を見送った話 - バイセル Tech Blog
#Next.js
doc: https://beta.nextjs.org/docs
Next 13の設計思想が詰まっている概念
React Server Componentsファースト
Next.js App Router (app ディレクトリ) の逆引き辞典
#GUI #アーキテクチャ #設計 #状態管理(GUI) #技術の審美眼
#opinionated
フロントエンドのレンダリングアーキテクチャとは別物
主にSPAの世界の話
---
#Next.js #Lee_Robinson
Why I'm Using Next.js | Lee Robinson
While I spent most of the post referencing points from Kent, I'd like to end with general reasons why I love using Next.js:
#Remix #Next.js #Kent_C._Dodds
Why I Won't Use Next.js | Epic Web Dev by Kent C. Dodds
Your tool choice matters much less than your skill at using the tool to accomplish your desired outcome (a great user experience).
#Remix #Next.js
from Why I Won't Use Next.js | Epic Web Dev by Kent C. Dodds
Remix vs Next.js | Remix
Next.js Commerce
Why I Won't Use Next.js | Epic Web Dev by Kent C. Dodds
#Pre-rendering
Pre-renderingはサーバーサイドで実行されるので、それを意識していないと、Web StorageとかのReference Errorが発生するケースがある
対策例
const mockStorageForPrerender: Storage = {
getItem: () => null,
#Next.js #postcss
こんな感じのエラーがでる
Error ERR_PACKAGE_PATH_NOT_EXPORTED: Package subpath './lib/parser' is not defined by "exports" in /path/to/app/node_modules/next/node_modules/postcss/package.json
前提
Next 10で同梱しているpostcssのバージョンは7
#Next.js
from Next.js 14 | Next.js
Next.js by Vercel - The React Framework | Next.js by Vercel - The React Framework
#React #Next.js
from なぜNext.jsを使用するのか
@takepepe: Next.js を選ぶ理由は単純で、Reactのドキュメント冒頭で「フレームワークに乗っかってね」と指している先頭にNext.jsがあるからですね。開発者確保が優先なので。
フレームワークのシェアを重視しがち
#Next.js #Remix
https://prateeksurana.me/blog/nextjs-13-vs-remix-an-in-depth-case-study/
#Storybook
概要
Next.js + Storybookにmswのアドオンを入れてビルドすると上記エラーでコケてしまう時がある
理由
親フォルダの./publicをそのフォルダ内の./public/storybookにコピーしようとして循環参照のようになってしまっている
#React #宣言的UIの設計レシピ #Navigation_State #TODO
https://www.notion.so/scrapbox-b561610d3e4e4f6abe56ef873e76c19a#2cd990b3212d47968f382a03af7e4bee
#Next.js
Shared ComponentsやIntercepting Routesでスマートに実現できる
例
#Rails #Next.js #フルスタック(言語統一開発) #Web_API #設計 #アーキテクチャ #技術の審美眼 #opinionated
from Vercel Ship started May 1st — Live Keynote May 4th
@yukihiro_matz: 使ってる言語や技術が違うから、フロントエンド部隊とバックエンド部隊に分けることが多いけど、いざ機能を開発する時には、両方にまたがった開発になるので、コンウェイの法則に反している。ひとつのチームにフロントエンド要員、バックエンド要員を配置
#パフォーマンス
https://twitter.com/takehora/status/1728593175814795728
Webパフォーマンスという「人の視覚体験」に関する技術を扱っているなら、神経とか、人の反応速度とか学んだ方が良いと思うのです。
密接に関係してるから。
とりあえず、精神物理学は学ぼうよ。
#設計 #エンジニアリング
業務システムを作ってるとQR, PDF, CSVなどのファイルをよく扱う
これらのファイルをどの技術レイヤで生成するかはよく論点になる
バックエンド
px単位の調整がつらい (検証が大変)
QAにおけるKnown, Unknownへのアプローチ
TDD
ATDD(受け入れテスト駆動開発)
BDD
セキュリティ
#技術の審美眼 #チェックリスト #OSS
大前提
ヒューマンインタフェースの思想についてデザイナと話す
逸脱事例を含めてすべてをレールに乗せる
ライセンス確認
#エンジニアリング #見積もり #リーダーシップ
@komitsubo: きっちり品質を作りこむ計画を立てる事は、とりあえず動かす事ばっかりやってる人達には根本的に無理なんだなーと痛感。これはやればできるとかやる気になればとかじゃなくて、ホント元々そういう素養がある人か経験者がいないとダメなんだなと再確認。
#React #技術の審美眼
WhyReact.md
プログラムを「計算機への命令」ではなく「関数を適用して値を得る計算」の定義と捉える
ステートフルなGUIを作るのが本質的に難しいという問題がある
歴史(過去)を話す
#パフォーマンス
https://speakerdeck.com/daisukeshinoku/smarthrnopahuomansugai-shan-ga-zong-li-zhan-datutahua
#パフォーマンス
from Webフロントエンドのパフォーマンス周り
Webブラウザのもう一つのパーサ: Preload Scanner | PerfData
https://twitter.com/takehora/status/1728578345666011598
フロントエンド側のWebパフォーマンスチューニングの基本として、「処理を混ぜない」ことを念頭に置くと良いでしょう。
#パフォーマンス
from Webフロントエンドのパフォーマンス周り
ウェブサイトのパフォーマンス改善をしよう
ショップサイト、広告から遷移するLPサイトのパフォーマンス改善
#意思決定 #パフォーマンス
キャンベルの法則 - Wikipedia
"計測結果が目標になると、その計測自体が役に立たなくなる"
from Rich Harris on frameworks, the web, and the edge
まとめてみると、私たちは手段と目的を取り違えている危険性があります。後述するように、最高のパフォーマンスを求めるなら、実はJavaScriptは必要不可欠なのです。
#パフォーマンス
from パフォーマンスチューニングの基本として、「処理を混ぜない」ことを念頭に置く
Do it once. Do it right. And, you'll never have to do it again.
一度だけやれ。正しくやれ。そうすれば二度とやらずに済む。
#パフォーマンス
from Webブラウザのもう一つのパーサ: Preload Scanner | PerfData
パフォーマンスチューニングの基本として、「処理を混ぜない」ことを念頭に置く
Do it once. Do it right. And, you'll never have to do it again.(一度だけやれ。正しくやれ。そうすれば二度とやらずに済む。)
#React #パフォーマンス
https://twitter.com/Shin_Engineer/status/1724035603464122526
Reactパフォーマンスチューニングの流れ🚀
①React dev toolsのProfilerでレンダリング時間の計測
②遅延が発生しているボトルネックを発見
#設計 #状態管理 #GUI #宣言的UIの設計レシピ #3D #アーキテクチャ
主にゲーム開発の文脈でのデータ指向型のプログラミングスタイルと、技術スタックの総称
データ、処理、レンダリングを分ける考え方で、ECS(Entity Component System)が基盤となっている
これを読むと全体感が端的につかめる
Unity DOTS
#宣言的UIにおける6種のステート #状態管理(GUI) #宣言的UIの設計レシピ
GUIのモジュール間の内部接続=(コンポーネントを跨ぐ状態共有)を目的としたステート
React.ContextやRedux Toolkitのsliceに相当する
https://react-community-tools-practices-cheatsheet.netlify.app/state-management/poimandres/
#宣言的UIの設計レシピ
https://react.dev/reference/react/Suspense
React v18のSuspenseで開発はどう変わるのか
理論がちゃんとある
Algebraic Effects
#パフォーマンス
Tree shaking - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
Tree Shaking | webpack
Tree-shaking versus dead code elimination | by Rich Harris | Medium
#パフォーマンス
長いタスクを分割するscheduler.yieldという提案
関連
Transition(React)
#パフォーマンス
#経営目線 #設計 #QA
from
テスト手法にトレンドがあってはいけない。テストは投資であって、長期的に安定しているべき
https://www.notion.so/koushisa/f68c8ef9e6444837bfbbf4c347124300?pvs=4#d7007186eef247d4be2d7dbaae24891b
開発組織をコストセンターのように捉えると知の探索に支障が出る場合がある
GitHub - dora-team/fourkeys: Platform for monitoring the four key software delivery metrics of software delivery
関連
定量的
ソフトウェア開発における「生産性」とは
#経済
お金の価値が定量的から定性的に。繋がりを作るための副次的なツールである。 | 杉原 淳一 × 深井 龍之介|株式会社COTEN
でも最近は「僕たちが世界にとって良いことをしていたらお金は集まるし、自分たちのためだけに何かしても集まらない」という当たり前のことが起こるだけだな、という感覚になっています。世界について良いことをしっかりやり続けたら、世界に生かされるだろうな、と。
#プログラミング #理解容易性
[プログラミングにおける可読性 https://ja.wikipedia.org/wiki/%E5%8F%AF%E8%AA%AD%E6%80%A7#:~:text=%E3%82%92%E9%87%8D%E3%81%AD%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82-,%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B
from 視覚体験
精神物理学 - Wikipedia
外的な刺激と内的な感覚の対応関係を測定し、また定量的な計測をしようとする学問である。認知科学や工学の分野では心理物理学と呼ばれることが多い。グスタフ・フェヒナーがその創始者であり、心理学(実験心理学)の成立に大きな影響を与えた。 外的な刺激は物理量として客観的に測定できる。そこで外的な刺激と内的な感覚との対応関係が分かれば、内的な感覚(クオリア)も客観的に測定できることになる。
#定量的 #定性的
from お金は川のように流れていて、その流れを引き込む作業がビジネス
ビジネスは定量的な正誤判断がされやすい
#デザイン
from リスクが低い無難なデザインや最適化作業を AI に任せることで、挑戦的な問題解決やものづくりに時間を割くことができる
明確で完璧な仕組みは柔軟性に欠け、創造性を測れない
KPI
定量的
#デバッグ #設計原則
from
成功率は、失敗回数と試行回数に比例するから安全に失敗できるのはチート
「ゼルダの伝説 BotW」にバグが少ない理由
推測するな計測せよ
#チェックリスト #設計 #問いかけ
何事も境界をきれいに切ろうとすると、絶対に隙間が生まれてしまう。境界が見えてしまうと、どうしてもその手前でブレーキをかける。境界部分のオーバーラップとインタラクション設計が重要。
メタ認知のための問いかけ
レイヤの存在意義を明確にする
なんの課題のために必要で、どうやってテストするか
#イベント駆動 #設計 #設計原則 #DB設計 #モデリング
/mrsekut-p/ヒト/モノ/コトに分ける
システム外部の振る舞いをモデリングする際はコトから理解すると事実関係を整理しやすい
ユーザーは何がきっかけでシステムを利用する?
無いとどうなるか?
from Svelte
当時の解釈によるものなので推測するな計測せよという話ではあるのだが
1つの事実に対して解釈は複数生まれる
---
SolidJSを踏まえて見つめ直すUIフレームワーク #Solid.js
#事実
from スタートアップにおける組織問題への対応について
1つの事実に対して解釈は複数生まれる
推測するな計測せよ
「適切な計測」は「適切な推測」なしに成り立たせるのが難しい
#類推 #推論
from 推測するな計測せよ
「推測するな、計測せよ」という訳はミスリードと言う話 - aki33524’s blog